<template>
  <div class="personal-center-container">
    <el-row :gutter="20">
      <el-col :lg="8" :md="12" :sm="24" :xl="8" :xs="24">
        <vab-card shadow="hover">
          <div class="personal-center-user-info">
            <el-avatar :size="100" :src="avatar" @click="openDialog" />
            <div class="personal-center-user-info-full-name">
              {{ form.realName }}
            </div>
            <div class="personal-center-user-info-description">
              {{ form.description }}
            </div>
            <ul class="personal-center-user-info-list">
              <li>
                <vab-icon icon="user-3-line" />
                {{ form.realName }}
              </li>
              <li>
                <vab-icon icon="magic-line" />
                {{ form.birthday ? form.birthday : translate('未知') }}
              </li>
              <li>
                <vab-icon icon="women-line" />
                {{
                  form.gender == 1
                    ? translate('男')
                    : form.gender == 2
                    ? translate('女')
                    : translate('保密')
                }}
              </li>
              <li>
                <vab-icon icon="mail-line" />
                {{ form.email }}
              </li>
              <!-- <li>
                <vab-icon icon="community-line" />
                集团 - 事业群 - 技术部
              </li> -->
              <li v-if="form.workAddress">
                <vab-icon icon="map-pin-2-line" />
                {{ form.workAddress }}
              </li>
            </ul>
          </div>
        </vab-card>
      </el-col>
      <el-col :lg="16" :md="12" :sm="24" :xl="16" :xs="24">
        <vab-card shadow="hover">
          <el-tabs v-model="activeName">
            <el-tab-pane :label="translate('基本信息')" name="first">
              <el-col :lg="12" :md="16" :sm="24" :xl="12" :xs="24">
                <el-form label-width="80px" :model="form">
                  <el-form-item :label="translate('账号')">
                    <el-input v-model="form.account" :disabled="true" />
                  </el-form-item>
                  <el-form-item :label="translate('手机')">
                    <el-input
                      v-model="form.mobile"
                      :disabled="true"
                      type="number"
                    />
                  </el-form-item>
                  <el-form-item :label="translate('性别')">
                    <el-select
                      v-model="form.gender"
                      :disabled="true"
                      style="width: 100%"
                    >
                      <el-option :label="translate('保密')" value="0" />
                      <el-option :label="translate('男')" value="1" />
                      <el-option :label="translate('女')" value="2" />
                    </el-select>
                  </el-form-item>
                  <el-form-item :label="translate('个人简介')">
                    <el-input v-model="form.description" type="textarea" />
                  </el-form-item>
                  <!-- <el-form-item>
                    <el-button type="primary" @click="onSubmit">保存</el-button>
                  </el-form-item> -->
                </el-form>
              </el-col>
            </el-tab-pane>
          </el-tabs>
        </vab-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { useUserStore } from '@/store/modules/user'
  import { getCurrentUserInfo } from '@/api/menuManagement'
  import { translate } from '@/i18n'
  export default defineComponent({
    name: 'PersonalCenter',
    setup() {
      const $baseMessage = inject('$baseMessage')

      const userStore = useUserStore()
      const { avatar } = storeToRefs(userStore)

      const _description = unescape(
        '\u5bcc\u5728\u672f\u6570\uff0c\u4e0d\u5728\u52b3\u8eab\uff1b\u5229\u5728\u52bf\u5c45\uff0c\u4e0d\u5728\u529b\u8015\u3002'
      )

      const state = reactive({
        vabCropperRef: null,
        activeName: 'first',
        form: {
          realName: '',
          gender: '0',
          description: _description,
          birthday: '',
          mobile: '',
          account: '',
          workAddress: '',
          email: '',
        },
        inputRef: null,
        inputVisible: false,
        inputValue: '',
      })

      const gettUserInfo = async () => {
        const data = await getCurrentUserInfo()
        state.form = data.data
        if (data.code === 401) {
          location.reload()
        }
        console.log(data)
      }
      gettUserInfo()
      const openDialog = () => {
        state['vabCropperRef'].dialogVisible = true
      }
      const onSubmit = () => {
        $baseMessage('模拟保存成功', 'success', 'vab-hey-message-success')
      }

      const showInput = () => {
        state.inputVisible = true
        nextTick(() => {
          state.inputRef.focus()
        })
      }

      return {
        ...toRefs(state),
        avatar,
        openDialog,
        onSubmit,
        showInput,
        gettUserInfo,
        translate,
      }
    },
  })
</script>

<style lang="scss" scoped>
  $base: '.personal-center';
  #{$base}-container {
    padding: 0 !important;
    background: $base-color-background !important;

    #{$base}-user-info {
      padding: $base-padding;
      text-align: center;

      :deep() {
        .el-avatar {
          img {
            cursor: pointer;
          }
        }
      }

      &-full-name {
        margin-top: 15px;
        font-size: 24px;
        font-weight: 500;
        color: #262626;
      }

      &-description {
        margin-top: 8px;
      }

      &-follow {
        margin-top: 15px;
      }

      &-list {
        margin-top: 18px;
        line-height: 30px;
        text-align: left;
        list-style: none;

        h5 {
          margin: -20px 0 5px 0;
        }

        :deep() {
          .el-tag {
            margin-right: 10px !important;
          }

          .el-tag + .el-tag {
            margin-left: 0;
          }
        }
      }
    }

    #{$base}-item {
      display: flex;

      i {
        font-size: 40px;
      }

      &-content {
        box-sizing: border-box;
        flex: 1;
        margin-left: $base-margin;

        &-second {
          margin-top: 8px;
        }
      }
    }
  }
</style>
